<template>
  <el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
      <el-form-item prop="name" label="课程名称">
        <el-input v-model="dataForm.name" placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item prop="teacherId" label="授课老师">
        <el-select v-model="dataForm.teacherId" clearable>
          <el-option v-for="item in teacherList" :key="item.id" :label="item.realName" :value="item.id">
          </el-option>
      </el-select>
      </el-form-item>
      <el-form-item prop="classRoom" label="课程教室">
        <el-input v-model="dataForm.classRoom" placeholder="课程教室"></el-input>
      </el-form-item>
      <el-form-item prop="classTime" label="课程时间">
        <el-input v-model="dataForm.classTime" placeholder="课程时间"></el-input>
      </el-form-item>
      <el-form-item prop="maxSize" label="最多选课人数">
        <el-input v-model="dataForm.maxSize" placeholder="最多选课人数"></el-input>
      </el-form-item>
      <el-form-item prop="description" label="课程介绍">
        <el-input v-model="dataForm.description" placeholder="课程介绍"  type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref,defineProps } from "vue";
import baseService from "@/service/baseService";
import { isEmail, isMobile } from "@/utils/utils";
import { IObject } from "@/types/interface";
import { ElMessage } from "element-plus";
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const roleList = ref<any[]>([]);
const dataFormRef = ref();

const dataForm = reactive({
  name: "",
  teacherId: "",
  classRoom: "",
  classTime: "",
  maxSize: "",
  description:'',
});
const props = defineProps({
  teacherList: Array,
  });
const rules = ref({
  name: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
  teacherId: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
  classRoom: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
  classTime: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
  maxSize: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
});

const init = (value?: object) => {
  visible.value = true;
    if (value && value.id) {
      dataForm.name = value.name;
      dataForm.id = value.id;
      dataForm.teacherId = value.teacherId;
      dataForm.classRoom = value.classRoom;
      dataForm.classTime = value.classTime;
      dataForm.maxSize = value.maxSize;
      dataForm.description = value.description;
    } else {
      if (dataFormRef.value) {
        dataFormRef.value.resetFields();
      }
      dataForm.name = '';
      dataForm.id = '';
      dataForm.teacherId = '';
      dataForm.classRoom = '';
      dataForm.classTime = '';
      dataForm.maxSize = '';
      dataForm.description = '';
    }
};

// 表单提交
const dataFormSubmitHandle = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false;
    }
    if (!dataForm.id) {
        baseService.post("/cam/course/create", {
          ...dataForm,
        }).then((res) =>
          ElMessage.success({
            message: "成功",
            duration: 500,
            onClose: () => {
              visible.value = false;
              emit("refreshDataList");
            }
          }))
      }
      else {
        baseService.put("/cam/course/update", {
          ...dataForm,
        }).then((res) =>
          ElMessage.success({
            message: "成功",
            duration: 500,
            onClose: () => {
              visible.value = false;
              emit("refreshDataList");
            }
          }))
      }
  });
};

defineExpose({
  init
});
</script>

<style lang="less" scoped>
.mod-sys__user {
  .role-list {
    .el-select {
      width: 100%;
    }
  }
}
</style>
